// 动态导入 Vue，并使用 defineComponent 定义一个新的组件 Welcome
export default (await import('vue')).defineComponent({
    name: 'Welcome', // 组件名称设置为 'Welcome'
    components: { // 定义组件中使用的子组件
      BookMark, // 引入 BookMark 组件
      Login,    // 引入 Login 组件
      Register  // 引入 Register 组件
    },
    data() {
      return {
        // 组件的响应式数据对象
        leftTitle: {
          title_1: '欢迎光临',   
          title_2_1: '小新',      // 左侧副标题第一部分
          title_2_2: '零食商城',  // 左侧副标题第二部分
          cover: require('./images/logo.png'), // 左侧封面图片路径
          buttonTitle: '点击登录', // 初始登录按钮标题
          // 下面是重复的键，可能是一个错误
          buttonTitle: "点击注册" // 这里应该是另一个属性的定义，例如 newButtonTitle
        },
        rightTitle: {
          title_1: '我们诚挚欢迎',
          title_2_1: '您的到来',
          title_2_2: '感谢您的支持',
          cover: require('./images/zhuce.jpeg'), // 右侧封面图片路径
          buttonTitle: '点击注册' // 右侧按钮标题
        },
      };
    },
    methods: {
      toLogin() {
        this.$refs.loginRef.show = true; // 控制登录组件显示
        this.$refs.registerRef.show = false; // 控制注册组件隐藏
        setTimeout(() => {
          // 使用 setTimeout 来实现动画效果
          this.$refs.loginRef.moveStyle = {
            transform: 'translateX(0px)' // 登录组件动画效果，移动到正常位置
          };
          // 注册组件的动画效果可能不需要，这里可能是代码错误
          this.$refs.registerRef.moveStyle = {
            transform: 'translateX(0px)' 
          };
        }, 10); // 动画效果延迟 10 毫秒执行
      },
      toRegister() {
        this.$refs.loginRef.show = false; // 控制登录组件隐藏
        this.$refs.registerRef.show = true; // 控制注册组件显示
        setTimeout(() => {
          // 使用 setTimeout 来实现动画效果
          this.$refs.loginRef.moveStyle = {
            transform: 'translateX(300px)' // 登录组件动画效果，向右移动
          };
          // 注册组件动画效果，向右移动
          this.$refs.registerRef.moveStyle = {
            transform: 'translateX(300px)' 
          };
        }, 10); // 动画效果延迟 10 毫秒执行
      },
    }
  });